<mat-card>Add delivery</mat-card>
<mat-progress-spinner *ngIf="!areItemsLoaded" mode="indeterminate">
</mat-progress-spinner>
<div class="content" *ngIf="areItemsLoaded">
  Recommended items:
  <mat-list class="content">
    <mat-list-item *ngFor="let rec of recommendedDeliveryItems">
      {{itemsById[rec.itemId].name}}
      <mat-form-field class="small-input">
        <input matInput placeholder="Quantity" [(ngModel)]="rec.quantity">
      </mat-form-field>
      <button mat-icon-button (click)="addRecommendedItem(rec.itemId, rec.quantity)">
        <mat-icon>add_circle_outline</mat-icon>
      </button>
    </mat-list-item>
  </mat-list>
  Remaining items:
  <div class="content" [formGroup]="itemsForm">
    <mat-form-field>
      <mat-label>Item</mat-label>
      <mat-select placeholder="itemId" name="itemId" formControlName="itemId" required>
        <mat-option *ngFor="let i of remainingItems" [value]="i.id">
          {{i.name}}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field appearance="legacy">
      <mat-label>Quantity</mat-label>
      <input matInput placeholder="quantity" name="quantity" formControlName="quantity" required>
      <mat-error *ngIf="quantity.invalid">{{getErrorMessage()}}</mat-error>
    </mat-form-field>

    <button mat-raised-button (click)="addDeliveryItem()" [disabled]="itemsForm.invalid">Add</button>
  </div>
  <div *ngIf="deliveryItemRequests.length > 0">
    <table mat-table [dataSource]="dataSource">
      <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef> Index</th>
        <td mat-cell *matCellDef="let row"> {{row.itemId}}</td>
      </ng-container>

      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef> Name</th>
        <td mat-cell *matCellDef="let row"> {{itemsById[row.itemId].name}}</td>
      </ng-container>

      <ng-container matColumnDef="quantity">
        <th mat-header-cell *matHeaderCellDef> Quantity</th>
        <td mat-cell *matCellDef="let row"> {{row.quantity}}</td>
      </ng-container>

      <tr mat-header-row
        *matHeaderRowDef="['id', 'name', 'quantity']"></tr>
      <tr mat-row
        *matRowDef="let row; columns: ['id', 'name', 'quantity']"></tr>
    </table>
    <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
  </div>

  <div class="content" [formGroup]="form">
    <mat-form-field appearance="legacy">
      <input matInput [min]="today" [matDatepicker]="picker" placeholder="Scheduled for" name="scheduledFor"
             formControlName="scheduledFor" required>
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>
  </div>

  <button mat-raised-button (click)="addDelivery()" [disabled]="form.invalid || deliveryItemRequests.length == 0">
    Add delivery
  </button>
</div>
